﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>登录</title>
    <link href="~/ui/lib/theme-chalk/index.css" rel="stylesheet" />
    <script src="~/ui/vue.min.js"></script>
    <script src="~/ui/lib/index.js"></script>
    <script src="~/ui/polyfill.min.js"></script>
    <script src="~/ui/axios.js"></script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        #app {
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .login-form {
            width: 420px;
            padding: 50px 40px 45px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: rgb(0 0 0 / 10%) 0 2px 10px 2px;
        }

        .login-box .login-logo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 45px;
        }

            .login-box .login-logo .logo-text {
                margin: 0;
                font-size: 42px;
                font-weight: bold;
                color: #34495e;
                white-space: nowrap;
            }


        .login-form .el-form-item {
            margin-bottom: 40px;
        }

        .login-form .login-btn {
            display: flex;
            justify-content: end;
            width: 100%;
            margin-top: 40px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="login-box">
            <div class="login-logo">
                <h2 class="logo-text">CEMS 数据转换</h2>
            </div>

            <div class="login-form">
                <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
                    <el-form-item prop="username">
                        <el-input prefix-icon="el-icon-user" v-model="loginForm.username" placeholder="用户名" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码" show-password autocomplete="new-password" />
                    </el-form-item>
                </el-form>
                <div class="login-btn">
                    <el-button v-on:click="login" size="large" type="primary" :loading="loading">
                        登录
                    </el-button>
                </div>
            </div>
        </div>

    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: function () {
                return {
                   loginForm:{
                   username:'',
                   password:''
                   },
                    loginRules: {
                         username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
                         password: [{ required: true, message: "请输入密码", trigger: "blur" }]
                    },
                    loading:false
                }
            },
            methods: {
                login() {
                    this.$refs.loginFormRef.validate(valid => {
                        if(!valid) return false
                         axios({
                        method: 'post',
                        url: '/api/Login/Login',
                        data:this.loginForm
                        }).then(res => {
                            if (res.data.errcode !== 0) return this.$message.error(res.data.errmsg)
                            window.location.href = "/Home/Index";
                        })
                    })
                },
            }
        });
    </script>
</body>
</html>
